<template>
  <div>
    <el-form :inline="true" :model="addForm" class="demo-form-inline demo-ruleForm" :rules="addRules" ref="addForm" :hide-required-asterisk="true">
      <el-form-item label="工号" prop="id">
        <el-input v-model="addForm.id" placeholder="工号"></el-input>
      </el-form-item>
      <el-form-item label="课程号" prop="cid">
        <el-input v-model="addForm.cid" placeholder="课程号"></el-input>
      </el-form-item>
      <el-form-item label="上课时间" prop="time">
        <el-input v-model="addForm.time" placeholder="上课时间"></el-input>
      </el-form-item>
      <el-form-item label="教学班" prop="teachid">
        <el-input v-model="addForm.teachid" placeholder="教学班"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">新增</el-button>
      </el-form-item>
    </el-form>
    <el-form :model="changeInfo" :rules="changeRules" ref="changeInfo">
      <el-table
      :data="tcData"
      border
      style="width: 100%"
      max-height="520px">
        <el-table-column
          prop="id"
          label="工号"
          width="233"
          :resizable="false"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="cid"
          label="课程号"
          width="233"
          :resizable="false"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="time"
          label="上课时间"
          width="280"
          :resizable="false"
          header-align="center"
          align="center">
          <template slot-scope="scope">
              <el-input v-show=" isEdit == scope.$index " v-model="scope.row.time" 
              placeholder="请输入内容" prop="time"></el-input>
              <span v-show=" isEdit != scope.$index ">{{ scope.row.time }}</span>
            </template>
        </el-table-column>
        <el-table-column
          prop="teachid"
          label="教学班"
          width="200"
          :resizable="false"
          header-align="center"
          align="center">
          <template slot-scope="scope">
              <el-input v-show=" isEdit == scope.$index " v-model="scope.row.teachid" 
              placeholder="请输入内容" prop="time"></el-input>
              <span v-show=" isEdit != scope.$index ">{{ scope.row.teachid}}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" :resizable="false" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              v-show="isEdit!==scope.$index"
              @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
              <el-button
              size="mini"
              v-show="isEdit===scope.$index"
              @click="hideInput">取消</el-button>
            <el-button
              size="mini"
              type="danger"
              class="delete"
              v-show="isEdit!==scope.$index"
              @click="handleDelete(scope.row)">删除</el-button>
              <el-button
              size="mini"
              type="primary"
              v-show="isEdit===scope.$index"
              @click="editInfo()">提交</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
import { addTC } from '@/api/teachcourse'
import { getTC } from '@/api/teachcourse'
import { updateTC } from '@/api/teachcourse'
import { deleteTC } from '@/api/teachcourse'
export default {
  data(){
    return{
      row:null,
      isEdit:-1,
      tcData:[],
      addForm:{
        id:'',
        cid:'',
        time:'',
        teachid:''
      },
      changeInfo:{   
        time:'', 
        teachid:''
      },
      addRules:{
        id:[
          {required:true,message:'工号不能为空',trigger:'blur'},
          {pattern:/^\d+$/,message:'工号不能包含字母及其他字符',trigger:'blur'}
        ],
        cid:[
          {required:true,message:'课程号不能为空',trigger:'blur'},
          {pattern:/^\d+$/,message:'课程号不能包含字母及其他字符',trigger:'blur'}
        ],
        time:[
          {required:true,message:'时间不能为空',trigger:'blur'},
          {pattern:/^\S{2,} \S{2,}$/,message:'请输入长度两位以上的非空字符',trigger:'blur'}
        ],
        teachid:[
          {required:true,message:'教学班不能为空',trigger:'blur'},
          {pattern:/^\d{4}$/,message:'教学班不能包含字母及其他字符',trigger:'blur'}
        ]
      },
      changeRules:{
        time:[
          {required:true,message:'时间不能为空',trigger:'blur'},
          {pattern:/^\S{2,} \S{2,}$/,message:'请输入长度两位以上的非空字符',trigger:'blur'}
        ],
        teachid:[
          {required:true,message:'教学班不能为空',trigger:'blur'},
          {pattern:/^\d{4}$/,message:'教学班不能包含字母及其他字符',trigger:'blur'}
        ]
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs.addForm.validate((valid)=>{
        if(valid){
          addTC({...this.addForm}).then(res=>{
            if(res.data.status===0){
              this.$nextTick(()=>{
                getTC().then(res=>{
                  if(res.data.status===0){
                    this.tcData=res.data.data
                  }else{
                    alert('添加失败！')
                  }
                })
              })
              alert('添加成功！')
              this.$refs.addForm.resetFields()
            }else{
              alert('添加失败！')
              this.$refs.addForm.resetFields()
            }
          })
        }
      })
    },
    handleEdit(index,row){
      this.isEdit=index
      this.row=row
    },
    hideInput(){
      this.isEdit=-1
    },
    editInfo(){
      this.changeInfo=this.row
      this.$refs.changeInfo.validate((valid)=>{
        if(valid){
          updateTC({...this.changeInfo}).then(res=>{
            if(res.data.status===0){
              this.$nextTick(()=>{
                getTC().then(res=>{
                  if(res.data.status===0){
                    this.tcData=res.data.data
                    this.isEdit=-1
                  }else{
                    alert('修改失败！')
                    this.$refs.changeInfo.resetFields()
                  }
                })
              })
              alert('修改成功！')
              this.$refs.changeInfo.resetFields()
            }else{
              alert('修改失败！')
            }
          })
        }
      })
    },
    handleDelete(row){
      deleteTC({id:row.id,cid:row.cid}).then(res=>{
        if(res.data.status===0){
          this.$nextTick(()=>{
            getTC().then(res=>{
              if(res.data.status===0){
                this.tcData=res.data.data
              }else{
                alert('删除失败！')
              }
            })
          })
          alert('删除成功！')
        }
      })
    },
  },
  mounted(){
    this.$nextTick(()=>{
      getTC().then(res=>{
        if(res.data.status===0){
          this.tcData=res.data.data
        }
      })
    })
  }
}
</script>

<style>
.delete{
  margin-left: 15px;
}
</style>